---
import BaseLayout from "./BaseLayout.astro";
const { frontmatter } = Astro.props;
---

<BaseLayout pageTitle={frontmatter.title}>
  <p>作者: {frontmatter.author}</p>
  <p>发表于: {frontmatter.date.toString().slice(0, 10)}</p>
  <p><em>{frontmatter.description}</em></p>
  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
  <div class="tags">
    {
      frontmatter.tags.map((tag: any) => (
        <p class="tag">
          <a href={`/tags/${tag}`}>{tag}</a>
        </p>
      ))
    }
  </div>
</BaseLayout>
<slot />

<style>
  a {
    color: #00539f;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: 0.5em;
    padding: 0.5em 1em;
    font-size: 1.15em;
    background-color: #f8fcfd;
  }
</style>
